<template lang='pug'>
append var
-var imgurl = 'static/image/'
	.mainxxxx(v-cloak)
		.main-footer(v-if="tablelist")
			.main-footer-son-one(:data-attr='tablelist.title') {{tablelist.title}}
			.main-footer-son-list(v-show='true || tablelist.flag' :data-attr='""' style='text-align: center;') {{'暂未开放' || '查看更多排行>'}}
			.main-footer-son-two(v-show='false')
				.main-footer-table-left(:data-attr='tablelist.table[0].title') {{tablelist.table[0].title}}
				ul.main-footer-table-right
					li(v-for='(item,index) in tablelist.table[0].list' :key='index' :data-attr='item') {{item}}
			.main-footer-son-three(v-for='(item,index) in tablelist.table' :key='index' v-if='index!==0' v-show='false')
				.main-footer-table-left.second-left(:data-attr='item.title') {{item.title}}
				ul.main-footer-table-right.second
					li(v-for='(item,index) in item.list' :key='index' :data-attr='item') {{item}}
		.Popup-one(v-show='tablelist.flag')
			.Popup-one-top(:data-attr='tablelist.poptitle?tablelist.poptitle:tablelist.pop' v-html='tablelist.pop')
			.Popup-one-bottom 
				img(src=imgurl+'X-btn.png' @click='tablelist.flag=false')
				img(src=imgurl+'Accept-btn.png' @click='puo_one_function' )
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      puo_one: true
    };
  },
  props: ["tablelist"],
  mounted() {},
  methods: {
    puo_one_function: function() {
      // if (!u.getStore("mount") && u.getStore("mount") <= 0 || parseInt($(".bpxnumber").val()) > u.getStore("mount")) {
      //   alert('数量不足请充值')
      //   return
      // }
      this.$emit("progress", true);
    }
  }
};
</script>
<style lang='less'>
@imgurl: "../../../static/image/";
.bpxnumber {
  background-image: url("@{imgurl}bpxnumber.png");
  width: 330px;
  height: 46px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  outline: none;
  border: 0px;
  color: white;
  padding-left: 30px;
  font-size: 18px;
  margin-left: 30px;
  &:focus {
    outline: none;
  }
}
.mainxxxx {
  max-width: 1280px;
  margin: 0 auto;
}
[v-cloak] {
  display: none;
}
.title(@color) {
  position: relative;
  font-size: 24px;
  color: white;
  z-index: 0;
  &:before {
    position: absolute;
    z-index: -1;
    content: attr(data-attr);
    -webkit-text-stroke: @color;
  }
}
.nav {
  height: 76px;
  width: 300px;
  margin: 0 auto;
  background-image: url("@{imgurl}z_3.png");
  background-repeat: no-repeat;
  .font;
  line-height: 47px;
  position: relative;
  top: -28px;
  margin-bottom: 22px;
  text-align: center;
}
.font {
  font-size: 27.67px;
  font-weight: 700;
  color: #fff;
}
.main-footer {
  min-height: 340px;
  background-image: url("@{imgurl}bgc.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 70px;
  max-width: 1280px;
  > .main-footer-son-one {
    .title(5px #1c6b65);
    .nav;
  }
  .main-footer-son-two,
  .main-footer-son-three {
    max-width: 1200px;
    height: 70px;
    background-size: 100% 70px;
    display: flex;
    text-align: center;
    line-height: 62px;
    .font;
    > .main-footer-table-left {
      flex: 1;
      text-align: left;
      padding-left: 60px;
      .title(5px #a65f0a);
    }
    > ul {
      flex: 3;
      display: flex;
      justify-content: space-between;
      text-align: center;
      padding-right: 70px;
      > li {
        .title(5px #a65f0a);
      }
    }
    .second-left {
      .title(5px #3a230a);
    }
    .second {
      > li {
        .title(5px #3a230a);
      }
    }
  }
  > .main-footer-son-two {
    background-image: url("@{imgurl}Segmented-btn1.png");
    background-repeat: no-repeat;
    margin: 0 40px;
    margin-bottom: 20px;
  }
  > .main-footer-son-three {
    background-image: url("@{imgurl}Coin-magnet.png");
    background-repeat: no-repeat;
    margin: 0 40px;
    font-size: 24px;
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
}
.Popup-one {
  background: url("@{imgurl}Panel.png") no-repeat;
  height: 210px;
  width: 460px;
  text-align: center;
  .fixed;
  > .Popup-one-bottom {
    > img:nth-of-type(1) {
      margin-right: 40px;
    }
    > img:nth-of-type(2) {
      margin-left: 40px;
    }
  }
  > .Popup-one-top {
    height: 150px;
    font-size: 28px;
    color: #fff;
    line-height: 150px;
    .title(5px #533c1f);
  }
}
.main-footer-son-list {
  text-align: right;
  padding-right: 50px;
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
  .title(5px #a65f0a);
}
</style>
